<template>
  <n-layout class="index-container" content-style="height:100%" has-sider position="absolute">
    <n-drawer
      v-model:show="chatStore.showChatSiderDrawer"
      :width="260"
      class="menu-drawer"
      placement="left"
      to=".index-container"
      display-directive="show"
    >
      <n-drawer-content>
        <n-layout-sider
          content-style="height:100%;overflow:hidden;"
          :native-scrollbar="false"
          :width="260"
          class="h-full"
        >
          <LayoutSider
            @openWechatLogin="openWechatLogin()"
            @openWechatOfficial="openWechatOfficial()"
            @openCardActive="openCardActive()"
          />
        </n-layout-sider>
      </n-drawer-content>
    </n-drawer>

    <n-layout-sider
      content-style="height:100%;overflow:hidden;"
      :native-scrollbar="false"
      :width="260"
      class="xs:hidden m:flex h-full"
    >
      <LayoutSider
        @openWechatLogin="openWechatLogin()"
        @openWechatOfficial="openWechatOfficial()"
        @openCardActive="openCardActive()"
      />
    </n-layout-sider>
    <n-layout
      :native-scrollbar="false"
      :content-style="{ height: $route.name === 'dialogue' ? '100%' : 'unset' }"
      class="main-layout dark:bg-dark h-full"
    >
      <LayoutHeader />
      <div class="h-[calc(100%-44px)] m:h-[calc(100%-56px)]">
        <n-layout-content v-if="$route.name === 'dialogue'" content-style="height:100%" class="main-content h-full">
          <RouterView @openWechatLogin="openWechatLogin()" />
        </n-layout-content>
        <n-layout-content v-else class="main-content xs:py-8 m:pt-16 m:pb-12 px-4">
          <RouterView />
        </n-layout-content>
      </div>
    </n-layout>
  </n-layout>

  <WechatLogin ref="WechatLoginRef" />
  <WechatOfficial ref="WechatOfficialRef" />
  <CardActive ref="CardActiveRef" />
</template>

<script setup>
import { getCurrentInstance, onMounted, h, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useNotification, NButton } from 'naive-ui'
import { useUserStore, useChatStore } from '@/store'
import LayoutSider from './components/LayoutSider.vue'
import LayoutHeader from './components/LayoutHeader.vue'

const WechatLogin = defineAsyncComponent(() => import('./components/WechatLogin.vue'))
const WechatOfficial = defineAsyncComponent(() => import('./components/WechatOfficial.vue'))
const CardActive = defineAsyncComponent(() => import('./components/CardActive.vue'))

const userStore = useUserStore()
const chatStore = useChatStore()
const notification = useNotification()

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

userStore.isLogin && chatStore.getMsgList()

if (route.query.ref) {
  localStorage.setItem('ref', route.query.ref)
  router.replace({ query: {} })
}

onMounted(() => {
  if (localStorage.getItem('alreadyRead') != 5) {
    let markAsRead = false
    const notice = notification.create({
      title: '更新公告：关闭免费用户拉新获取会员的通道',
      content: `首先我们开创平台的目的，是为了解决很多人用ChatGPT难的问题，所以开始免费开设了小M智能助手，帮助更多有需要的人。
但后面因为成本原因，我们不得不采取收费模式来维持运转，但价格远远低于市场。
虽然仍不足以支持平台支出，但我们很高兴看到越来越多的朋友来使用，也得到了很多客户的认同。
前期我们开设了推广有礼的活动，是为了让更多人了解到这款产品。
但我们发现并不是这样，反而被部分有心人钻空子(大号拉小号，拉死人的方式层出不穷)。
这无疑是违背了我们的本心的，也是很令我们伤心的行为。
所以目前推广返利，只针对于付费用户进行开放。望理解！
本站唯一域名：ai.mxcks.com`,
      meta: '2023-3-27',
      class: 'notice-container',
      action: () =>
        h(
          NButton,
          {
            text: true,
            type: 'success',
            onClick: () => {
              markAsRead = true
              notice.destroy()
              localStorage.setItem('alreadyRead', 5)
            },
          },
          { default: () => '已读，不再弹出' }
        ),
      onClose: () => {
        if (!markAsRead) {
          $message.warning('请设为已读', { duration: 1000 })
          return false
        }
      },
    })
  }
})

const openWechatLogin = () => {
  proxy.$refs.WechatLoginRef.openWxLogin()
}

const openWechatOfficial = () => {
  proxy.$refs.WechatOfficialRef.basicOpenWxModal()
}

const openCardActive = () => {
  proxy.$refs.CardActiveRef.openCardActive()
}
</script>

<style lang="less" scoped>
.index-container {
  height: 100%;

  &:deep(.menu-drawer) {
    .n-drawer-body {
      .n-drawer-body-content-wrapper {
        padding: 0;
      }
    }
  }

  &:deep(.n-layout-sider) {
    background-color: #202123;
    .n-scrollbar {
      .n-scrollbar-container {
        .n-scrollbar-content {
          .option-space {
            .n-scrollbar-content {
              height: unset;
            }
          }
        }
      }
    }

    .newchat-box {
      .n-button--ghost {
        .n-button__state-border,
        .n-button__border {
          border-color: #55575e;
        }
      }

      .n-button:not(.n-button--disabled):hover {
        background-color: #2b2c2f;
      }
    }
  }

  &:deep(.main-layout) {
    background-color: #f0f3f8;

    .n-scrollbar-content {
      //height: 100%;
      .main-content {
        margin-bottom: 0;
        background: transparent;

        .n-layout-scroll-container {
          width: 100%;
        }
      }
    }
  }
}
</style>
